<template>
	<view class="yg-gl">
		<!-- search组件的开始 -->
		<search></search>
		<!-- search组件的结束 -->
		<Tabs :tabs="tabs" @mytab="handclick"> </Tabs>
		<scroll-view scroll-y="true" class="yg-gl-pl" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore"  @scrolltolower="handleReachBottom">
			<Goodlist :goods="goodlist"></Goodlist>
		</scroll-view>
	</view>
</template>

<script>
	import Search from "../../components/Search.vue"
	import Tabs from "../../components/Tabs.vue"
	import Goodlist from '../../components/GoodList.vue'
	export default {
		components: {
			Search,
			Tabs,
			Goodlist
		},
		onLoad(Option) {
			// console.log(Option)
			this.getGoodlist(Option)
		},
		data() {
			return {
				triggered: false,
				tabs: [{
					id: 1,
					text: "综合",
					isActive: true // false
				}, {
					id: 2,
					text: "销量",
					isActive: false // true
				}, {
					id: 3,
					text: "价格",
					isActive: false // false
				}],
				query: '',
				cid: '',
				pagenum: 1,
				pagesize: 20,
				goodlist: [],
				total: '',
			}

		},
		methods: {
			handclick: function(tabs) {
				this.tabs = tabs
			},
			getGoodlist: async function(Option) {
				let {
					query,
					cid
				} = Option
				let params = {}
				if (cid) {
					this.cid = cid
					params.cid = cid
				}
				if (query) {
					this.query = query
					params.query = query
				}
				params.pagenum = this.pagenum
				params.pagesize = this.pagesize
				const res = await this.$request({
					url: 'goods/search',
					data: params
				})
				this.total = res.message.total
				this.goodlist = res.message.goods
			},
			onRefresh: async function() {

				if (this._freshing) return;
				this._freshing = true
				this.triggered = true
				await this.getGoodlist({
					cid: this.cid,
					query: this.query
				})
				
                   setTimeout(()=>{
					   
					this._freshing = false
					this.triggered = false
				   },1000)
		
			},
			onRestore: function() {
				this.triggered = false
			},
			handleReachBottom:async function(){
				let totals=Math.ceil(this.total/this.pagenum)
				let currents=parseInt(this.pagenum)+1
				if(currents<=totals){
					let params={}
					if(this.cid){
						params.cid=this.cid
					}
					if(this.query){
						params.query=this.query
					}
					params.pagenum=currents
					params.pagesize=this.pagesize
					const res1=await this.$request({
					url: 'goods/search',
					data:params
					})
					console.log(res1)
					let goodlist={...this.goodlist,...res1.message.goods}
				this.total = res1.message.total
				this.goodlist = res1.message.goods
				this.pagenum=res1.message.pagenum
				}else{
					uni.showToast({
						title:'最后一张了'
					})
				}
			}

		}

	}
</script>

<style lang="scss">
	.yg-gl {
		.yg-gl-pl {
			height: calc(100vh - 188rpx);
		}
	}
</style>
